<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row style="height: 100%" type="flex">
			<cl-biz-toolbar v-model="search.biz_id" @change="bizChange" />
			<cl-flex1 class="h-100" style="overflow: hidden">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex">
							<div class="title">{{ biz_name }}</div>
							<cl-flex1 />
							<div>
								<cl-filter-group v-model="search" class="pr-1">
									<cl-filter label="所属事业部">
										<cl-select
											v-model="search.biz_id"
											placeholder="请选择"
											filterable
										>
											<el-option
												v-for="item in business"
												:key="item.biz_id"
												:label="item.biz_name"
												:value="item.biz_id"
											/>
										</cl-select>
									</cl-filter>
									<cl-filter label="品牌">
										<cl-select
											v-model="search.bra_id"
											placeholder="全部"
											clearable
											multiple
											collapse-tags
											filterable
										>
											<el-option
												v-for="item in bizRefData.brand"
												:key="item.bra_id"
												:label="item.bra_name"
												:value="item.bra_id"
											/>
										</cl-select>
									</cl-filter>
									<cl-filter label="应用名称">
										<el-input
											v-model="search.app_name"
											placeholder="请输入应用名称"
											clearable
											style="width: 170px"
										/>
									</cl-filter>
									<!-- <cl-flex1 /> -->
								</cl-filter-group>
							</div>
							<div>
								<el-button
									icon="el-icon-plus"
									type="primary"
									@click="addMediaApplication"
								>
									新增媒体应用
								</el-button>
							</div>
						</el-row>
					</template>
					<div style="height: 100%">
						<cl-table v-bind="table">
							<cl-empty slot="empty" />
							<template #column-adv_name="{ scope: { row } }">
								<div>抖音</div>
							</template>
							<template #column-status="{ scope: { row } }">
								<el-tag :type="row.status == 1 ? 'primary' : 'danger'" size="mini">
									{{ row.status == 1 ? "有效" : "无效" }}
								</el-tag>
							</template>
							<template #column-xianfeng_status="{ scope: { row } }">
								<el-tag
									:type="row.xianfeng_status == 1 ? 'primary' : 'danger'"
									size="mini"
								>
									{{ row.xianfeng_status == 1 ? "已开启" : "未开启" }}
								</el-tag>
							</template>
							<template #column-opt="{ scope: { row } }">
								<el-button type="warning" @click="addOrUpdateApp('update', row)">
									编辑
								</el-button>
								<el-button type="danger" @click="deleteMediaApplication(row.id)">
									删除
								</el-button>
							</template>
						</cl-table>
					</div>
					<template #foot>
						<el-row type="flex">
							<cl-flex1 />
							<zm-pagination />
						</el-row>
					</template>
				</cl-pagefull>
			</cl-flex1>
		</el-row>
		<!-- 选择媒体平台 -->
		<template>
			<div class="dialogBox">
				<el-dialog title="选择媒体平台" width="500px" :visible.sync="outerVisible" @close="close">
					<div class="radioBox">
						<div class="radio" v-for="item in platformList" :key="item.id">
							<img :src="item.plat_logo" alt="" @click="changeRadio(item.plat_as)" />
							<el-radio v-model="radio" :label="item.plat_as">
								<span class="demonstration">{{ item.name }}</span>
							</el-radio>
						</div>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button type="primary" @click="addOrUpdateApp('add')"
							>添加应用</el-button
						>
						<el-button @click="outerVisible = false">取消</el-button>
					</div>
				</el-dialog>
			</div>
		</template>
		<!-- 新增应用表单 -->
		<add-info-form ref="addInfoFormRef" @refresh="refresh" />
	</cl-crud>
</template>

<script>
import { mapGetters } from "vuex";
import addInfoForm from "./components/add-info-form";
export default {
	name: "SetPromotionmediaApplication",
	components: { addInfoForm },
	data() {
		return {
			search: {
				bra_id: [],
				keyword: "",
				biz_id: ""
			},
			biz_name: "",
			platformList: [],
			radio: "",
			outerVisible: false,
			table: {
				"context-menu": ["refresh"],
				columns: [
					{
						label: "#",
						type: "index",
						width: 50,
						fixed: true,
						disable: true
					},
					{
						label: "所属事业部",
						prop: "biz_name",
						width: 150,
						showOverflowTooltip: true
					},
					{
						label: "所属品牌",
						prop: "bra_name",
						minWwidth: 150,
						showOverflowTooltip: true
					},
					{ label: "所属媒体", prop: "adv_name", width: 200 },
					{
						label: "应用名称",
						prop: "app_name",
						minWidth: 100,
						showOverflowTooltip: true
					},
					{
						label: "APP_ID",
						prop: "app_id",
						minWidth: 80,
						showOverflowTooltip: true
					},
					{
						label: "Secret",
						prop: "app_secret",
						minwidth: 100,
						showOverflowTooltip: true
					},
					{ label: "创建时间", prop: "addtime", width: 200 },
					{ label: "状态", prop: "status", width: 100 },
					{ label: "先锋计划", prop: "xianfeng_status", width: 100 },
					{ label: "操作", prop: "opt", width: 150, fixed: "right", disable: true }
				],
				props: {
					maxHeight: 500
				}
			},
			load: false
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		},
		...mapGetters(["browser"])
	},
	methods: {
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.media)
				.set("dict", {
					api: {
						page: "page"
					}
				})
				.done();
			if (!this.load) return;
			app.refresh();
		},
		async onRefresh(params, { next, done, render }) {
			const { biz_id } = this.search;
			console.log(biz_id);
			let { list } = await next({
				...params,
				biz_id
			});
			render(list);
		},
		//切换左侧事业部
		bizChange(v) {
			this.search.biz_id = v.biz_id;
			this.biz_name = v.biz_name;
			this.search.bra_id = [];
			this.init();
			this.refresh();
		},
		//新增媒体应用
		async addMediaApplication() {
			const { biz_id } = this.search;
			// const data = await this.$service.config.mediaPlatformList({ biz_id });
			const data = [
				{
					plat_as: "Oe",
					plat_logo:
						"https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/app_logo/app_oc.png",
					type_name: "启用",
					name: "抖音",
					plat_id: 1,
					status: 1
				},
				{
					plat_as: "Qq",
					plat_logo:
						"https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/app_logo/app_qq.png",
					type_name: "启用",
					name: "腾讯",
					plat_id: 2,
					status: 99
				},
				{
					plat_as: "Ks",
					plat_logo:
						"https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/app_logo/app_ks.png",
					type_name: "停用",
					name: "快手",
					plat_id: 3,
					status: 99
				},
				{
					plat_as: "Jg",
					type_name: "停用",
					name: "极光",
					plat_id: 4,
					status: 99
				},
				{
					plat_as: "Bz",
					type_name: "停用",
					name: "B站",
					plat_id: 5,
					status: 99
				},
				{
					plat_as: "Bd",
					plat_logo:
						"https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/app_logo/app_bd.png",
					type_name: "停用",
					name: "百度",
					plat_id: 6,
					status: 99
				},
				{
					plat_as: "Qt",
					type_name: "停用",
					name: "其他",
					plat_id: 7,
					status: 99
				},
				{
					plat_as: "Wb",
					plat_logo:
						"https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/app_logo/app_wb.png",
					type_name: "停用",
					name: "微博",
					plat_id: 18,
					status: 99
				}
			];

			this.platformList = data.filter(item => {
				return item.status === 1;
			});
			this.outerVisible = true;
		},
		//添加或修改
		addOrUpdateApp(key, row) {
			let type = "";
			if (key === "add") {
				type = this.radio;
				if (!type) {
					this.$message.warning("请选择媒体平台");
					return;
				}
			}
			let { biz_id } = this.search;
			this.outerVisible = false;
			setTimeout(() => {
				this.$refs.addInfoFormRef.open(key, row, type, biz_id);
			}, 300);
		},

		deleteMediaApplication(id) {
			this.confirm("你确定要删除吗, 是否继续?")
				.then(async () => {
					await this.$service.media.del({ id });
					this.$message.success("删除成功");
					this.refresh();
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消"
					});
				});
		},
		//点击图片选择
		changeRadio(adv_as) {
			this.radio = adv_as;
		},
		// crud刷新
		refresh(biz_id, reset = true) {
			let params = { ...this.search, biz_id };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
			this.load = true;
		},
		close() {
			this.radio = "";
			this.outerVisible = false;
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	font-size: 18px;
}
.dialogBox {
	text-align: center;
	::v-deep .el-dialog__body {
		border-top: 1px solid #ccc;
	}
	.radioBox {
		display: flex;
		flex-wrap: wrap;
		cursor: pointer;
		.radio {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// width: 20%;
			// height: 20%;
			width: 50%;
			height: 50%;

			img {
				border: 1px solid #ebeef5;
				margin-left: 5px;
				width: 100%;
				height: 100%;
				margin-bottom: 10px;
			}
		}
	}
}
</style>
